<template>
  <div class="container">
    <el-card>
      <h3 slot="header">安全设置</h3>
      <ul>
        <li>
          <span class="left">绑定手机号码</span>
          <span class="disabled">{{user ? user.phone.substring(0, 3) : ''}}******** (无法修改)</span>
        </li>
        <li>
          <span class="left">实名认证</span>
          <span class="disabled">************ (无法修改)</span>
        </li>
        <li>
          <span class="left">登录密码</span>
          <span class="value">************</span>
          <el-button size="small" type="primary" @click="changePassword">修改</el-button>
        </li>
        <li>
          <span class="left">支付密码</span>
          <span class="value">************</span>
          <el-button size="small" type="primary">设置</el-button>
        </li>
        <li>
          <span class="left">支付宝授权</span>
          <el-button size="small" type="text">去授权</el-button>
        </li>
        <li>
          <span class="left">银行卡支付协议</span>
          <el-button size="small" type="text">去开户</el-button>
        </li>
      </ul>
    </el-card>
    <el-dialog
      title="修改密码"
      :visible.sync="passwdVisible"
      width="600px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <ChangePassword :phone="user ? user.phone : ''">test</ChangePassword>
    </el-dialog>
  </div>
</template>
<script>
  import { doVerifyUser } from '@/apis/user';
  import ChangePassword from '@/views/account/ChangePassword.vue';

  export default {
    name: 'Settings',
    components: { ChangePassword },
    data() {
      return {
        passwdVisible: false,
        user: undefined
      };
    },
    methods: {
      changePassword() {
        this.passwdVisible = true;
      }
    },
    async mounted() {
      const token = this.cache.fetchToken();
      if (!token) this.$router.replace('/');
      const ret = await doVerifyUser(token);
      if (!ret) this.$router.replace('/');
      this.user = this.cache.fetchUser();
      console.log(this.user);
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.el-card {
  width: 100%;
  ul {
    li {
      padding: 15px;
      @include v-center();
      .left {
        display: inline-block;
        width: 222px;
      }
      .disabled {
        color: #777;
      }
      .el-button {
        margin-left: 15px;
      }
    }
  }
}
</style>
